<template>
  <div class="wrap">
    <div class="menu">
      <a-tabs default-active-key="1">
        <a-tab-pane class="" key="1" title="立体柱状图">
          <div class="tabs_item">
            <Ltzzt class="chart"></Ltzzt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" title="横向柱状图">
          <div class="tabs_item">
            <Hxzzt class="chart"></Hxzzt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" title="立体圆柱图">
          <div class="tabs_item">
            <Ltyzt class="chart"></Ltyzt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" title="曲线图">
          <div class="tabs_item">
            <Qxt class="chart"></Qxt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="5" title="折线图">
          <div class="tabs_item">
            <Qxt class="chart"></Qxt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="6" title="散点图">
          <div class="tabs_item">
            <Qxt class="chart"></Qxt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="7" title="立体环形图">
          <div class="tabs_item">
            <Qxt class="chart"></Qxt>
          </div>
        </a-tab-pane>
        <a-tab-pane key="7" title="平面环形图">
          <div class="tabs_item">
            <Qxt class="chart"></Qxt>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
export default defineComponent({
  name: "App",
});
</script>
<script setup>
import Ltzzt from "./components/ltzzt/index.vue";
import Hxzzt from "./components/hxzzt/index.vue";
import Ltyzt from "./components/ltyzt/index.vue";
import Qxt from "./components/qxt/index.vue";
</script>

<style lang="scss" scoped>
.tabs_item {
  width: 100%;
  height: 100vh;
  position: relative;
  .chart {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
}
</style>
